import React from 'react';
import Topbar from '../../components/Topbar/Topbar';
import './My.css';
import { withRouter } from 'react-router-dom'; 
import { NoticeBar } from 'antd-mobile';
import axios from 'axios'; 

class My extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = {
        id:localStorage.getItem('userid'),
        image:localStorage.getItem('userimage'),
        name:localStorage.getItem('username'),
        email:localStorage.getItem('useremail'),
        birth:localStorage.getItem('userbirth'),
        tel:localStorage.getItem('usertel'),
        userinfo:[],
	  };
	}

    outLogin(){
        localStorage.clear()
        this.props.history.push('/')
    }

    async componentDidMount() {
        //获得用户信息
        await axios.get('https://www.prebeauty.work/user/'+this.state.id)
    　　　.then((res) => {
            this.setState({
                userinfo:res.data[0]
            })
            console.log(this.state.userinfo)
    　　　})
         .catch((err) => {
         　　console.log(err);
         })

         //监听返回时间，返回到my页面后重新获取数据
         if (window.history && window.history.pushState) {
            //获得用户信息
            await axios.get('https://www.prebeauty.work/user/'+this.state.id)
            　　　.then((res) => {
                    this.setState({
                        userinfo:res.data[0]
                    })
                    console.log(this.state.userinfo)
            　　　})
                .catch((err) => {
                　　console.log(err);
                })
          }
    }

    /*显示选择后的图片，然后存在服务器上之后，发送Post请求 */
    async inputfile() {
        //1、显示选择后的图片
        let file1 = document.querySelector('#image-upload').files[0];
        if(file1){
          var reader = new FileReader();
            // 图片文件转换为base64
            reader.readAsDataURL(file1);
            reader.onload = function(){
            // 显示图片
            document.getElementById("touxiang").src = this.result;
            }
        }
        this.setState({
          file1:file1
        })

        //2、发送post请求存在服务器上
        // 获得上传文件DOM对象
        var imagefile = document.querySelector("#image-upload").files[0];
        // 实例化一个表单数据对象
        var formData = new FormData();
        formData.append('fileName', imagefile.name);
        formData.append('file', imagefile);
        await fetch(`https://www.prebeauty.work/upload`, {
            method: 'POST',
            body: formData,  
        })
        .then((res) => res.json())
        .then((res) => {
            localStorage.setItem("userimage",'https://www.prebeauty.work'+res.name);
            //将图片存在用户表中
            const imagesrcParam={
                image:'https://www.prebeauty.work'+res.name
            }
            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                method: 'PUT',
                body: JSON.stringify(imagesrcParam),
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then((res) => res.json() )
            .then((res) => {
                console.log(res);
            })
            
        })  
    }

	render() {
        return (
            <div className="My">
                <Topbar name="个人中心" color="#95D2AA"/>
                <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                    Info项目全体成员提醒您：保护好个人信息，不要泄露给陌生人，谨防不法分子诈骗。
                </NoticeBar>
                <div className="my-touxiang">
                    <img
                        id="touxiang"
                        style={{
                            width:'60%',
                            height:'110px',
                            borderRadius:55, 
                        }}
                        src={this.state.image}	
                        alt='.'
                    />
                </div>   
                <i className="iconfont icon-ai-camera" 
                    style={{
                        fontSize:'30px',
                        color:'#95D2AA',
                        position:'absolute',
                        top:'207px',
                        left:'57%'
                }}></i>
                <div id="input_div" >
                    <input type="file" id="image-upload" name="file1" onChange={this.inputfile.bind(this)} />这里上传头像
                </div>
 
                <div className='my-box'>
                    <div className='my-info'  onClick={()=>{this.props.history.push('/MyDetail',{type:'name'})}}>
                        <div className='my-title'><p>昵 称：</p></div>
                        <div className='my-content'><p>{this.state.userinfo.name}</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                    <div className='my-info'>
                        <div className='my-title'><p>账 号：</p></div>
                        <div className='my-content'><p>{this.state.id}</p></div>
                    </div>
                    <div className='my-info'  onClick={()=>{this.props.history.push('/MyDetail',{type:'tel'})}}>
                        <div className='my-title'><p>手 机：</p></div>
                        <div className='my-content'><p>{this.state.userinfo.tel}</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>

                    <div style={{width:'100%',height:'60px'}}></div>

                    <div className='my-info' onClick={()=>{this.props.history.push('/MyDetail',{type:'male'})}}>
                        <div className='my-title'><p>性 别：</p></div>
                        <div className='my-content'><p>{this.state.userinfo.male ? this.state.userinfo.male : '无' }</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                   
                    <div className='my-info' onClick={()=>{this.props.history.push('/MyDetail',{type:'birth'})}}> 
                        <div className='my-title'><p>生 日：</p></div>
                        <div className='my-content'><p>{this.state.userinfo.birth}</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                    <div className='my-info' onClick={()=>{this.props.history.push('/MyDetail',{type:'mail'})}}>
                        <div className='my-title'><p>邮 箱：</p></div>
                        <div className='my-content'>
                            <div id="my-email" >
                                {this.state.userinfo.email}
                            </div>
                        </div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                    <div className='my-info' onClick={()=>{this.props.history.push('/MyDetail',{type:'sentence'})}}>
                        <div className='my-title'><p>签 名：</p></div>
                        <div className='my-content'><p>{this.state.userinfo.sentence ? this.state.userinfo.sentence : '无'}</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>

                    <div style={{width:'100%',height:'60px'}}></div>

                    <div className='my-info' onClick={()=>{this.props.history.push('/Mysay')}}>
                        <div className='my-title'><p>我的发布</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                    <div className='my-info'  onClick={()=>{this.props.history.push('/Mylike')}}>
                        <div className='my-title'>
                            <p>我的点赞</p>
                        </div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                    <div className='my-info'>
                        <div className='my-title'><p>我的收藏</p></div>
                        <p style={{float:'right',marginRight:'5%'}}>></p>
                    </div>
                    <div style={{width:'100%',height:'60px'}}></div>
                    <button className="outlogin" onClick={this.outLogin.bind(this)}>退出登录</button>
                </div>
        </div>
        )
    }
}

export default withRouter(My)